<template>
    <div>
         <!-- 分组管理模块 -->
                <el-card>                
                    <div slot="header" class="clearfix">
                        <span>分组管理</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="createNewGroup">新建分组</el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="name" label="分组名称" > </el-table-column>
                        <el-table-column prop="amount" label="包含商品数"  > </el-table-column>
                        <el-table-column  fixed="right" label="操作" width="100">
                            <template slot-scope="scope">                        
                                <el-button type="text" size="small" @click="editGroup(scope.$index, scope.row)">编辑</el-button>
                                <el-button  type="text" size="small" @click="deleteGroup(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
    </div>
</template>

<script>


// 引入LeanCloud存储
var AV = require('leancloud-storage');

import Groups from '../../../models/Groups.js'

export default {
    props:['groupsList','goodsList'],
  data() {
    return {      
        tableData:[],
        shopId:localStorage.getItem('shop_id')
    };
  },
  watch:{
      goodsList(newValue,oldValue){
          this.updateData()
      },
      groupsList(newValue,oldValue){
          this.updateData()
      }
  },
  methods:{ 
      updateData(){
          if(this.groupsList.length ===0 || this.goodsList.length ===0) return;
          let nTableData = []
            this.groupsList.map(item=>{
                let amount = 0;
                this.goodsList.forEach(element => {
                    if(element.groups.contains(item.name)){
                        amount ++
                    }
                });
                item.amount = amount  
                nTableData.push(item)          
            })
            this.tableData = nTableData
      },     
      createNewGroup(){
          this.$prompt('请输入分组名称', '新建分组', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {

            // 连接数据库创建新的分组
            let nGroup = new Groups()
            nGroup.name = value
            nGroup.shopId = AV.Object.createWithoutData('Seller', this.shopId); //设置店铺ID//this.shopId

            //创建角色权限
            var acl = new AV.ACL()
            acl.setPublicReadAccess(true)
            acl.setPublicWriteAccess(false)

            //给当前用户赋予写权限
            acl.setWriteAccess(AV.User.current(),true)

            nGroup.setACL(acl)
            nGroup.save().then(group=>{
                //创建分组成功
                this.tableData.push({
                    name:value,
                    amount:0,
                    id:group.id
                })

                this.$message({
                    type: 'success',
                    message: `新建分组: ${value} 成功!`
                });

            }).catch(error=>{
                this.$message.error(error)
            })
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      deleteGroup(index,row){
          console.log('index:',index)

          console.log('row:',row)
          if(row.amount>0){
              this.$message.error(`该组内仍包含${row.amount}个商品，请先删除商品再进行删除分组操作`)
          }
          
            // let tindex = -1;
            // for (let index = 0; index < this.tableData.length; index++) {
            //     if(this.tableData[index].id === id.row.id){
            //         tindex = index;
            //     }            
            // }
            // if(tindex!=-1){
            //     this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            //     }).then(() => {                


            //         this.tableData.splice(tindex,1)
            //         this.$message({
            //             type: 'success',
            //             message: '删除成功!'
            //         });
            //     }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取消删除'
            //     });          
            //     });
            // }else
            // {
            //     this.$message({
            //             type: 'warning',
            //             message: '未找到该记录'
            //         }); 
            // }
          
      },
      editGroup(index,row){
          console.log('Edit Group!')
      }
  }
};
</script>
<style lang="scss" scoped>

.image{
    width: 100px;
    display: block;
}
.price{
    color: red;
}
.button{
    float:right;
    margin-left:5px;

    padding:5px;
}
</style>
